import React from 'react';
import { Row, Col, Card } from 'antd';
import { ProjectOutlined, CheckCircleOutlined, AuditOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import styles from '../styles/components.less';

const DataOverview: React.FC = () => {
  const items = [
    {
      title: '总项目数',
      value: 112,
      icon: <ProjectOutlined />,
      color: '#1890ff',
      prefix: '共',
      suffix: '个',
    },
    {
      title: '预验收项目数',
      value: 45,
      icon: <AuditOutlined />,
      color: '#52c41a',
      suffix: '个',
    },
    {
      title: '正式验收项目数',
      value: 38,
      icon: <CheckCircleOutlined />,
      color: '#722ed1',
      suffix: '个',
    },
    {
      title: '整改项目数',
      value: 29,
      icon: <ExclamationCircleOutlined />,
      color: '#fa8c16',
      suffix: '个',
    },
  ];

  return (
    <Row gutter={16} className={styles.dataOverview}>
      {items.map((item, index) => (
        <Col span={6} key={index}>
          <Card className={styles.overviewCard}>
            <div className={styles.cardContent}>
              <div className={styles.iconWrapper} style={{ backgroundColor: `${item.color}15` }}>
                {React.cloneElement(item.icon as React.ReactElement, {
                  style: { fontSize: '20px', color: item.color }
                })}
                <span className={styles.title}>{item.title}</span>
              </div>
              <div className={styles.valueWrapper}>
                <span className={styles.prefix}>{item.prefix}</span>
                <span className={styles.value} style={{ color: item.color }}>{item.value}</span>
                <span className={styles.suffix}>{item.suffix}</span>
              </div>
            </div>
          </Card>
        </Col>
      ))}
    </Row>
  );
};

export default DataOverview; 